<?php

use yii\helpers\Url;

$productList = $this->params['productList'];
$categoryList = $this->params['categoryList2'];
?>
<!-- ============================================================= HEADER : END ============================================================= -->		<div id="top-banner-and-menu">
    <div class="container">
        <div class="col-xs-12 col-sm-4 col-md-3 sidemenu-holder">
            <!-- ================================== TOP NAVIGATION ================================== -->
            <div class="side-menu animate-dropdown">
                <div class="head"><i class="fa fa-list"></i> 所有分类</div>        
                <nav class="yamm megamenu-horizontal" role="navigation">
                    <ul class="nav">
						<?php
						$categoryList = $this->params['categoryList2'];
						foreach ($categoryList as $key => $categoryUnit) {
							?>
							<li class="dropdown menu-item">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									<?php echo $categoryUnit[0]; ?></a>
								<ul class="dropdown-menu mega-menu">
									<li class="yamm-content">
										<div class="row">
											<div class="col-md-4">
												<ul class="list-unstyled">
													<?php
													foreach ($categoryUnit[1] as $UnitKey => $value) {
														?>
														<li><a href="<?php
															echo Url::toRoute(['product/search',
																'categoryId' => $UnitKey]);
															?>">
														<?php echo $value['title'] ?></a></li>
													<?php }
													?>
												</ul>
											</div>
										</div>
									</li>

								</ul>
							</li><!-- /.menu-item -->
						<?php }
						?>
                    </ul><!-- /.nav -->
                </nav><!-- /.megamenu-horizontal -->
            </div><!-- /.side-menu -->
            <!-- ================================== TOP NAVIGATION : END ================================== -->		</div><!-- /.sidemenu-holder -->

        <div class="col-xs-12 col-sm-8 col-md-9 homebanner-holder">
            <!-- ========================================== SECTION – HERO ========================================= -->
            <div id="hero">
                <div id="owl-main" class="owl-carousel owl-inner-nav owl-ui-sm">

                    <div class="item" style="background-image: url(http://ofy6hewql.bkt.clouddn.com/2.jpg);">
                        <div class="container-fluid">
							<!--                            <div class="caption vertical-center text-left">
															<div class="big-text fadeInDown-1">
																Save up to a<span class="big"><span class="sign">$</span>400</span>
															</div>
							
															<div class="excerpt fadeInDown-2">
																on selected laptops<br>
																& desktop pcs or<br>
																smartphones
															</div>
															<div class="small fadeInDown-2">
																terms and conditions apply
															</div>
															<div class="button-holder fadeInDown-3">
																<a href="#" class="big le-button ">shop now</a>
															</div>
														</div> /.caption -->
                        </div><!-- /.container-fluid -->
                    </div><!-- /.item -->

                    <div class="item" style="background-image: url(http://ofy6hewql.bkt.clouddn.com/2016121911372368.jpg);">
                        <div class="container-fluid">
							<!--                            <div class="caption vertical-center text-left">
															<div class="big-text fadeInDown-1">
																Want a<span class="big"><span class="sign">$</span>200</span>Discount?
															</div>
							
															<div class="excerpt fadeInDown-2">
																on selected <br>desktop pcs<br>
															</div>
															<div class="small fadeInDown-2">
																terms and conditions apply
															</div>
															<div class="button-holder fadeInDown-3">
																<a href="#" class="big le-button ">shop now</a>
															</div>
														</div> /.caption -->
                        </div><!-- /.container-fluid -->
                    </div><!-- /.item -->

                </div><!-- /.owl-carousel -->
            </div>

            <!-- ========================================= SECTION – HERO : END ========================================= -->			
        </div><!-- /.homebanner-holder -->

    </div><!-- /.container -->
</div><!-- /#top-banner-and-menu -->

<!-- ========================================= HOME BANNERS ========================================= -->
<section id="banner-holder" class="wow fadeInUp">
    <div class="container">
        <div class="col-xs-12 col-lg-4 no-margin banner">
            <a href="#">
				<!--                <div class="banner-text theblue">
									<h1>New Life</h1>
									<span class="tagline">Introducing New Category</span>
								</div>-->
                <img class="banner-image" alt="" src="http://ofy6hewql.bkt.clouddn.com/31.jpg" />
            </a>
        </div>
        <div class="col-xs-12 col-lg-4 no-margin text-right banner">
            <a href="#">
				<!--                <div class="banner-text right">
									<h1>Time &amp; Style</h1>
									<span class="tagline">Checkout new arrivals</span>
								</div>-->
                <img class="banner-image" alt="" src="http://ofy6hewql.bkt.clouddn.com/32.jpg" />
            </a>
            </a>
        </div>
        <div class="col-xs-12 col-lg-4 no-margin text-right banner">
            <a href="#">
				<!--                <div class="banner-text right">
									<h1>Time &amp; Style</h1>
									<span class="tagline">Checkout new arrivals</span>
								</div>-->
                <img class="banner-image" alt="" src="http://ofy6hewql.bkt.clouddn.com/5.jpg" />
            </a>
            </a>
        </div>
    </div><!-- /.container -->
</section><!-- /#banner-holder -->
<!-- ========================================= HOME BANNERS : END ========================================= -->
<div id="products-tab" class="wow fadeInUp">
    <div class="container">
        <div class="tab-holder">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" >
                <li class="active"><a href="#featured" data-toggle="tab">推荐商品</a></li>
                <li><a href="#new-arrivals" data-toggle="tab">最热商品</a></li>
                <li><a href="#top-sales" data-toggle="tab">最新商品</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane active" id="featured">
                    <div class="product-grid-holder row">
						<?php
						foreach ($productList['tui'] as $productUnit) {
							?>
							<div class="col-sm-4 col-md-3 no-margin product-item-holder hover">
								<div class="product-item">
									<div class="ribbon red"><span>热卖</span></div> 
									<div class="image" style="width:280px;height: 280px;padding-top:10px;margin: auto;;">
										<a href="<?php echo Url::toRoute(['product/view', 'id' => $productUnit->productId]); ?>"
										   class="thumb-holder">
											<img style="width:280px;height: 280px" alt="" src="//<?php echo $productUnit->cover; ?>" />
										</a>
									</div>
									<div class="body">
										<div class="label-discount clear"></div>
										<div class="title">
											<a href="<?php echo Url::toRoute(['product/view', 'id' => $productUnit->productId]); ?>"><?php echo $productUnit->title ?></a>
										</div>
										<div class="brand">特卖</div>
									</div>
									<div class="prices">
										<div class="price-prev"><?php echo $productUnit->price; ?></div>
										<div class="price-current pull-right"><?php echo $productUnit->issale == 0 ? $productUnit->saleprice : $productUnit->price; ?></div>
									</div>
									<div class="hover-area">
										<div class="add-cart-button">
											<a href="<?php echo \yii\helpers\Url::toRoute(['product/view', 'id' => $productUnit->productId]) ?>" class="le-button">添加到购物车</a>
										</div>
										<div class="wish-compare">
											<a class="btn-add-to-wishlist" href="#">添加到心愿单</a>
											<a class="btn-add-to-compare" href="#">关注</a>
										</div>
									</div>
								</div>
							</div>
<?php } ?>
                    </div>
                    <div class="loadmore-holder text-center">
                        <a class="btn-loadmore" href="#">
                            <!--<i class="fa fa-plus"></i>-->
                        </a>
                    </div> 
                    <div class="loadmore-holder text-center">
                        <a class="btn-loadmore" href="#">
                            <i class="fa fa-plus"></i>
                            更多</a>
                    </div> 

                </div>
                <div class="tab-pane" id="new-arrivals">

                    <div class="product-grid-holder row">
						<?php
						foreach ($productList['new'] as $productUnit) {
							?>
							<div class="col-sm-4 col-md-3 no-margin product-item-holder hover">
								<div class="product-item">
									<div class="ribbon red"><span>热卖</span></div> 
									<div class="image" style="width:280px;height: 280px;padding-top:10px;margin: auto;;">
										<a href="<?php echo Url::toRoute(['product/view', 'id' => $productUnit->productId]); ?>" 
										   class="thumb-holder">
											<img style="width:280px;height: 280px" alt="" src="//<?php echo $productUnit->cover; ?>" />
										</a>
									</div>
									<div class="body">
										<div class="label-discount clear"></div>
										<div class="title">
											<a href="<?php echo Url::toRoute(['product/view', 'id' => $productUnit->productId]); ?>"><?php echo $productUnit->title ?></a>
										</div>
										<div class="brand">特卖</div>
									</div>
									<div class="prices">
										<div class="price-prev"><?php echo $productUnit->price; ?></div>
										<div class="price-current pull-right"><?php echo $productUnit->issale == 0 ? $productUnit->saleprice : $productUnit->price; ?></div>
									</div>
									<div class="hover-area">
										<div class="add-cart-button">
											<a href="<?php echo Url::toRoute(['product/view', 'id' => $productUnit->productId]); ?>" class="le-button">添加到购物车</a>
										</div>
										<div class="wish-compare">
											<a class="btn-add-to-wishlist" href="#">添加到心愿单</a>
											<a class="btn-add-to-compare" href="#">关注</a>
										</div>
									</div>
								</div>
							</div>
<?php } ?>
                    </div>
                    <div class="loadmore-holder text-center">
                        <a class="btn-loadmore" href="#">
                            <!--<i class="fa fa-plus"></i>-->
                        </a>
                    </div> 
                    <div class="loadmore-holder text-center">
                        <a class="btn-loadmore" href="#">
                            <i class="fa fa-plus"></i>
                            更多</a>
                    </div> 

                </div>

                <div class="tab-pane" id="top-sales">
                    <div class="product-grid-holder row">
						<?php
						foreach ($productList['hot'] as $productUnit) {
							?>
							<div class="col-sm-4 col-md-3 no-margin product-item-holder hover">
								<div class="product-item">
									<div class="ribbon red"><span>热卖</span></div> 
									<div class="image" style="width:280px;height: 280px;padding-top:10px;margin: auto;;">
										<a href="<?php echo Url::toRoute(['product/view', 'id' => $productUnit->productId]); ?>" class="thumb-holder">	
											<img style="width:280px;height: 280px" alt="" src="//<?php echo $productUnit->cover; ?>" />
										</a>
									</div>
									<div class="body">
										<div class="label-discount clear"></div>
										<div class="title">
											<a href="<?php echo Url::toRoute(['product/view', 'id' => $productUnit->productId]); ?>"><?php echo $productUnit->title ?></a>
										</div>
										<div class="brand">特卖</div>
									</div>
									<div class="prices">
										<div class="price-prev"><?php echo $productUnit->price; ?></div>
										<div class="price-current pull-right"><?php echo $productUnit->issale == 0 ? $productUnit->saleprice : $productUnit->price; ?></div>
									</div>
									<div class="hover-area">
										<div class="add-cart-button">
											<a href="<?php echo Url::toRoute(['product/view', 'id' => $productUnit->productId]); ?>" class="le-button">添加到购物车</a>
										</div>
										<div class="wish-compare">
											<a class="btn-add-to-wishlist" href="#">添加到心愿单</a>
											<a class="btn-add-to-compare" href="#">关注</a>
										</div>
									</div>
								</div>
							</div>
<?php } ?>
                    </div>
                    <div class="loadmore-holder text-center">
                        <a class="btn-loadmore" href="#">
                            <!--<i class="fa fa-plus"></i>-->
                        </a>
                    </div> 
                    <div class="loadmore-holder text-center">
                        <a class="btn-loadmore" href="#">
                            <i class="fa fa-plus"></i>
                            更多</a>
                    </div> 
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ========================================= BEST SELLERS ========================================= -->
<section id="bestsellers" class="color-bg wow fadeInUp">
    <div class="container">
        <h1 class="section-title">推荐商品</h1>

        <div class="product-grid-holder medium">
            <div class="col-xs-12 col-md-7 no-margin">

                <div class="row no-margin">
					<?php
					$i = 0;
					foreach ($productList['hot'] as $productUnit) {
						?>
						<div class="col-xs-12 col-sm-4 no-margin product-item-holder size-medium hover">
							<div class="product-item">
								<div class="image" >
									<img alt="" src="//<?php echo $productUnit->cover; ?>" />
								</div>
								<div class="body">
									<div class="label-discount clear"></div>
									<div class="title">
										<a href="<?php echo Url::toRoute(['product/view', 'id' => $productUnit->productId]); ?>"><?php echo $productUnit->title ?></a>
									</div>
									<div class="brand">热卖</div>
								</div>
								<div class="prices">
									<div class="price-current text-right"><?php echo $productUnit->issale == 0 ? $productUnit->saleprice : $productUnit->price; ?></div>
								</div>
								<div class="hover-area">
									<div class="add-cart-button">
										<a class="le-button" href="<?php echo Url::toRoute(['product/view', 'id' => $productUnit->productId]); ?>" class="le-button">添加到购物车</a>
									</div>
									<div class="wish-compare">
										<a class="btn-add-to-wishlist" href="#">添加到心愿单</a>
										<a class="btn-add-to-compare" href="#">关注</a>
									</div>
								</div>
							</div>
						</div><!-- /.product-item-holder -->
						<?php
						$i++;
						if ($i == 3) {
							break;
						}
					}
					?>
				</div><!-- /.row -->
                <div class="row no-margin">
					<?php
					$i = 0;
					foreach ($productList['tui'] as $productUnit) {
						?>
						<div class="col-xs-12 col-sm-4 no-margin product-item-holder size-medium hover">
							<div class="product-item">
								<div class="image" >
									<img alt="" src="//<?php echo $productUnit->cover; ?>" />
								</div>
								<div class="body">
									<div class="label-discount clear"></div>
									<div class="title">
										<a href="<?php echo Url::toRoute(['product/view', 'id' => $productUnit->productId]); ?>"><?php echo $productUnit->title ?></a>
									</div>
									<div class="brand">热卖</div>
								</div>
								<div class="prices">
									<div class="price-current text-right"><?php echo $productUnit->issale == 0 ? $productUnit->saleprice : $productUnit->price; ?></div>
								</div>
								<div class="hover-area">
									<div class="add-cart-button">
										<a class="le-button" href="
	<?php echo Url::toRoute(['product/view', 'id' => $productUnit->productId]); ?>" 
										   class="le-button">添加到购物车</a>
									</div>
									<div class="wish-compare">
										<a class="btn-add-to-wishlist" href="#">添加到心愿单</a>
										<a class="btn-add-to-compare" href="#">关注</a>
									</div>
								</div>
							</div>
						</div><!-- /.product-item-holder -->
						<?php
						$i++;
						if ($i == 3) {
							break;
						}
					}
					?>
                </div><!-- /.row -->
            </div><!-- /.col -->
            <div class="col-xs-12 col-md-5 no-margin">
                <div class="product-item-holder size-big single-product-gallery small-gallery">
                    <div id="best-seller-single-product-slider" class="single-product-slider owl-carousel">
						<?php
						$pictures = (array) json_decode($productModel->pictures, true);
						$i = 1;
						foreach ($pictures as $picture) {
							?>
							<div class="single-product-gallery-item" id="slide<?php echo $i; ?>">
								<a data-rel="prettyphoto" href="images/products/product-gallery-01.jpg">
									<img alt="" src="//<?php echo $picture; ?>" />
								</a>
							</div><!-- /.single-product-gallery-item -->
							<?php
							$i++;
						}
						?>
                    </div><!-- /.single-product-slider -->

                    <div class="gallery-thumbs clearfix">
                        <ul>
							<?php
							$pictures = (array) json_decode($productModel->pictures, true);
							$i = 0;
							foreach ($pictures as $picture) {
								?>
								<li><a class="horizontal-thumb active" data-target="#best-seller-single-product-slider" 
									   data-slide="<?php echo $i; ?>" href="#slide1">
										<img width="67" alt="" src="<?= Yii::$app->urlManager->baseUrl ?>/assets/images/blank.gif" 
											 data-echo="//<?php echo $picture; ?>" />
									</a></li>
								<?php
								$i++;
							}
							?>
                        </ul>
                    </div><!-- /.gallery-thumbs -->

                    <div class="body">
                        <div class="label-discount clear"></div>
                        <div class="title">
                            <a href="#"><?php echo $productModel->title ?></a>
                        </div>
                        <div class="brand">热卖</div>
                    </div>
                    <div class="prices text-right">
                        <div class="price-current inline">￥<?php echo $productModel->saleprice ?></div>
                        <a href="<?php echo Url::toRoute(['product/view', 'id' => $productModel->productId]); ?>" 
						   class="le-button">添加到购物车></a>
                    </div>
                </div><!-- /.product-item-holder -->
            </div><!-- /.col -->

        </div><!-- /.product-grid-holder -->
    </div><!-- /.container -->
</section><!-- /#bestsellers -->
<!-- ========================================= BEST SELLERS : END ========================================= -->
<!-- ========================================= RECENTLY VIEWED ========================================= -->
<?php if (!Yii::$app->user->isGuest) { ?>
	<section id="recently-reviewd" class="wow fadeInUp">
		<div class="container">
			<div class="carousel-holder hover">

				<div class="title-nav">
					<h2 class="h1">最近浏览</h2>
					<div class="nav-holder">
						<a href="#prev" data-target="#owl-recently-viewed" class="slider-prev btn-prev fa fa-angle-left"></a>
						<a href="#next" data-target="#owl-recently-viewed" class="slider-next btn-next fa fa-angle-right"></a>
					</div>
				</div><!-- /.title-nav -->

				<div id="owl-recently-viewed" class="owl-carousel product-grid-holder">
					<?php
					foreach ($recentViewProductList as $recentViewProductUnit) {
						?>
						<div class="no-margin carousel-item product-item-holder size-small hover">
							<div class="product-item">
								<div class="ribbon red"><span>特卖</span></div> 
								<div class="image">
									<img alt="" src="//<?php echo $recentViewProductUnit->cover; ?>" data-echo="//<?php echo $recentViewProductUnit->cover; ?>" />
								</div>
								<div class="body">
									<div class="title">
										<a href="<?php echo Url::toRoute(['product/view', 'id' => $recentViewProductUnit->productId]); ?>"><?php echo $recentViewProductUnit->title; ?></a>
									</div>
									<!--<div class="brand">Sharp</div>-->
								</div>
								<div class="prices">
									<div class="price-current text-right"><?php echo $recentViewProductUnit->saleprice; ?></div>
								</div>
								<div class="hover-area">
									<div class="add-cart-button">
										<a href="<?php echo Url::toRoute(['product/view', 'id' => $productUnit->productId]); ?>" class="le-button">添加到购物车</a>
									</div>
									<div class="wish-compare">
										<a class="btn-add-to-wishlist" href="#">添加到心愿单</a>
										<a class="btn-add-to-compare" href="#">关注</a>
									</div>
								</div>
							</div><!-- /.product-item -->
						</div><!-- /.product-item-holder -->
	<?php } ?>
				</div><!-- /#recently-carousel -->
			</div><!-- /.carousel-holder -->
		</div><!-- /.container -->
	</section><!-- /#recently-reviewd -->
	<!-- ========================================= RECENTLY VIEWED : END ========================================= -->		<!-- ============================================================= FOOTER ============================================================= -->
<?php } ?>
<!-- ========================================= RECENTLY VIEWED : END ========================================= -->
<!-- ========================================= TOP BRANDS ========================================= -->
<section id="top-brands" class="wow fadeInUp">
    <div class="container">
        <div class="carousel-holder" >

            <div class="title-nav">
                <h1>加盟品牌</h1>
                <div class="nav-holder">
                    <a href="#prev" data-target="#owl-brands" class="slider-prev btn-prev fa fa-angle-left"></a>
                    <a href="#next" data-target="#owl-brands" class="slider-next btn-next fa fa-angle-right"></a>
                </div>
            </div><!-- /.title-nav -->

            <div id="owl-brands" class="owl-carousel brands-carousel">

                <div class="carousel-item">
                    <a href="#">
                        <img alt="" src="<?= Yii::$app->urlManager->baseUrl ?>/assets/images/brands/brand-01.jpg" />
                    </a>
                </div><!-- /.carousel-item -->

                <div class="carousel-item">
                    <a href="#">
                        <img alt="" src="<?= Yii::$app->urlManager->baseUrl ?>/assets/images/brands/brand-02.jpg" />
                    </a>
                </div><!-- /.carousel-item -->

                <div class="carousel-item">
                    <a href="#">
                        <img alt="" src="<?= Yii::$app->urlManager->baseUrl ?>/assets/images/brands/brand-03.jpg" />
                    </a>
                </div><!-- /.carousel-item -->

                <div class="carousel-item">
                    <a href="#">
                        <img alt="" src="<?= Yii::$app->urlManager->baseUrl ?>/assets/images/brands/brand-04.jpg" />
                    </a>
                </div><!-- /.carousel-item -->

                <div class="carousel-item">
                    <a href="#">
                        <img alt="" src="<?= Yii::$app->urlManager->baseUrl ?>/assets/images/brands/brand-01.jpg" />
                    </a>
                </div><!-- /.carousel-item -->

                <div class="carousel-item">
                    <a href="#">
                        <img alt="" src="<?= Yii::$app->urlManager->baseUrl ?>/assets/images/brands/brand-02.jpg" />
                    </a>
                </div><!-- /.carousel-item -->

                <div class="carousel-item">
                    <a href="#">
                        <img alt="" src="<?= Yii::$app->urlManager->baseUrl ?>/assets/images/brands/brand-03.jpg" />
                    </a>
                </div><!-- /.carousel-item -->

                <div class="carousel-item">
                    <a href="#">
                        <img alt="" src="<?= Yii::$app->urlManager->baseUrl ?>/assets/images/brands/brand-04.jpg" />
                    </a>
                </div><!-- /.carousel-item -->

            </div><!-- /.brands-caresoul -->

        </div><!-- /.carousel-holder -->
    </div><!-- /.container -->
</section><!-- /#top-brands -->
<!-- ========================================= TOP BRANDS : END ========================================= -->		<!-- ============================================================= FOOTER ============================================================= -->
